<template>
  <div class="offlinemoney">
    <!-- 标题 -->
    <el-row class="header">
      <el-col :span="2" class="headerImg">
        <img src="../assets/left.png" alt />
      </el-col>
      <el-col :span="22" class="headerTitle">{{title}}</el-col>
    </el-row>
    <!-- 课程列表 -->
    <el-row class="kc">
      <el-col :span="8" class="kcimg">
        <img src="../assets/1308040.png" alt />
      </el-col>
      <el-col :span="16" class="kcdetil">
        <p class="kctitle">科研能力提升策略（优秀班级 ）</p>
        <p class="kcaddress">地点：北京市</p>
        <p class="kctime">10月9号至10月20号（10天）</p>
      </el-col>
    </el-row>
    <!-- 分享列表 -->
    <el-row class="fenxiang">
      <el-col :span="22" :offset="1">
        <el-button round size="mini">删除预报名</el-button>
        <el-button round size="mini">修改设置</el-button>
        <el-button round size="mini" @click="toggle">分享</el-button>
        <el-button round size="mini">管理名单</el-button>
      </el-col>
    </el-row>
    <!-- 分享link -->
    <el-row class="link" v-show="value">
      <el-col :span="24" class="linktitle">分享收集报名名单</el-col>
      <el-col :span="8" class="linkimg">
        <img src="../assets/微信1@2x.png" alt />
        <p>微信好友</p>
      </el-col>
      <el-col :span="8" class="linkimg">
        <img src="../assets/QQ1@2x.png" alt />
        <p>QQ好友</p>
      </el-col>
      <el-col :span="8" class="linkimg">
        <img src="../assets/链接1@2x.png" alt />
        <p>复制链接</p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "mybaoming",
  data() {
    return {
      title: "我的预报名",
      value: false
    };
  },
  methods: {
    toggle(e) {
      this.value = !this.value;
    }
  }
};
</script>


<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
.offlinemoney {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}
.header {
  background: #ffffff;
  height: 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  .headerImg {
    height: 0.8rem;
    img {
      width: 0.3rem;
      height: 0.5rem;
      overflow: hidden;
      margin-top: 0.15rem;
      float: right;
    }
    // background: red;
  }
  .headerTitle {
    font-size: 0.26rem;
    line-height: 0.8rem;
    text-align: center;
    font-weight: 600;
  }
}
// 课程图
.kc {
  margin: 0.1rem 0;
  background: #fff;
  padding: 0.25rem;
  .kcimg {
    background: #000;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .kcdetil {
    text-indent: 0.2rem;
    .kctitle {
      font-size: 0.25rem;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }
    .kcaddress {
      color: #aaa2a2;
      line-height: 0.4rem;
    }
    .kctime {
      color: #aaa2a2;
      line-height: 0.4rem;
    }
  }
}

// 分享按钮

.fenxiang {
  height: 0.8rem;
  margin: 0.1rem 0;
  background: white;
  text-indent: 0.2rem;
  border-bottom: 0.1rem solid #f8f8f8;
}
.el-button.is-round {
  height: 0.5rem;
  margin-top: 0.1rem;
  padding: 0.07rem 0.2rem;
}
.link {
  width: 96%;
  height: 2.65rem;
  background: white;
  position: absolute;
  bottom: -0.2rem;
  left: 2%;
  text-align: center;
  border: 1px solid #838383;
  border-radius: 0.2rem;
  .linktitle{
      font-size: 0.26rem;
    margin-top: 0.3rem;
      font-weight: 600
  }
  .linkimg {
      margin-top: 0.2rem;
    img {
      width: 0.8rem;
      height: 0.8rem;
    }
    p{
        line-height: 0.5rem;
    }
  }
}
</style>